<template>
	<v-scale-screen :width="win.screen.width" :height="win.screen.height" style="margin:0;padding:0;">
		<div ref="page" style="width:100%;position:relative;background-color:#000;margin:0 auto;overflow:hidden;padding:0.1rem;padding-top:0;">
	         <!-- 纯组态模式 -->
	         <div class="viewContent" id="viewContent" style="margin:0!important;" ref="viewContent">
	         	<iframe v-if="Number(viewForm.stage_id) && showView"
	         		:src="'static/optionZT/client_view.html?stageId='+viewForm.stage_id" frameborder="no"
	         		id="mainIframe" name="mainIframe" ref="mainIframe" class="framForView" ></iframe>
	         	<div v-if="!showView && !drawList.length" style="color:#eee;font-size: 0.35rem;">该组态没有创建图纸</div>
	         	<div class="viewbtn_2" ref="viewBtn">
	         		<!-- <div class="exit" v-if="userType==1" @click="goExit('control')"><span class="exitIcon"><i class="el-icon-s-fold" style="font-size:0.45rem;"></i></span>控制台</div> -->
	         		<i v-if="!screenFull" class="el-icon-full-screen"  title="全屏显示" @click="fullscreenFull" ></i>
	         		<img v-else src="../../static/back.png"  title="退出全屏" @click="exitscreenFull"/>
	         		<i class="el-icon-refresh" title="刷新数据" @click="refreshViewAndData"></i>
					<i class="el-icon-office-building" title="显示\隐藏项目列表" @click="showOptionList"></i>

	         		<!-- <img src="../../static/list.png" style="margin-left:0.2rem;" title="显示\隐藏组态列表"
	         			v-if="viewList.length>1" @click="showViewList" /> -->
					<i class="el-icon-picture-outline"   title="显示\隐藏组态列表"
						v-if="viewList.length>1" @click="showViewList" ></i>
					<i class="el-icon-video-play"   title="图纸轮播"
						v-if="drawList.length>1 && !isPlay" @click="swiperStage" ></i>
					<i class="el-icon-video-pause"   title="停止轮播"
						v-if="drawList.length>1 && isPlay" @click="stopTrunView" ></i>
	         		<!-- <i class="el-icon-s-platform" v-if="largeScreenId!=-1" title="监控大屏" @click="goScreenTotal"></i> -->
	         		<i class="el-icon-s-fold" v-if="userType<=2" title="控制台" @click="goExit('control')"></i>
					<i class="el-icon-s-fold" v-else title="退出登录" @click="goExit('exit')"></i>

					<!-- <el-button type="primary" size="mini" id="goback" v-if="drawList.length>1 && !isPlay"  @click="swiperStage">图纸轮播</el-button>
					<el-button type="primary" size="mini" id="goback" v-if="drawList.length>1 &&  isPlay"  @click="stopTrunView">停止轮播</el-button> -->
	         		<!-- <i class="el-icon-s-fold" v-if="userType!=1" title="退出登录" @click="goExit('exit')"></i> -->
	         		<!-- <span v-if="userType!=1"  >用户名：{{userName}}</span> -->
	         		<!-- <el-button type="primary" size="mini" id="goback" @click="refreshViewData">刷新</el-button> -->
	         	</div>
	         	<div class="viewBox" v-show="viewListShow" @mousemove="keepViewList"  @mouseover="keepViewList" @mouseout="closeViewList">
	         		<div class="listHead">当前组态列表</div>
					<div class="oneView" :class="nowView==item.label?'active_2':''" v-for="(item,i) in viewList"
	         			:key="i" @click="changeStage(item,$event)">{{item.label}}</div>
	         	</div>
				<div class="viewBox" v-show="optionListShow" @mousemove="keepOptionList"  @mouseover="keepOptionList" @mouseout="closeOptionList">
					<div class="listHead">项目列表</div>
					<div class="oneView" :class="nowOption==item.label?'active_2':''" v-for="(item,i) in options"
						:key="i" @click="changeOption(item,$event)">{{item.label}}</div>
				</div>
	         </div>
	    </div>
		<el-dialog :visible="dialogSwiperVisible" :width="win.screen.width>=1600?'22%':'34%'" append-to-body
			:show-close="close" top="220px">
			<div class="toptit">
				<span>图纸轮播设置</span>
				<span style="float: right; cursor: pointer" @click="dialogSwiperVisible = false">关闭</span>
			</div>
			<el-form :model="viewForm" style="text-align: left;margin-top:0.3rem;" block>
				<el-form-item label="轮播间隔:" label-width="110px">
					<el-input style="width:3rem" class="swiperInput" v-model="viewForm.interval" placeholder="30秒至60秒" type="number" :min="30"  :max="600" :step="10"  @change="changeInterval(viewForm.interval)"></el-input> s
				</el-form-item>
				<el-form-item    label=""  label-width="110px" style="margin-top:-0.3rem;">
					<p style="font-size:0.3rem;color:red;">注:限制30至600秒,默认60秒</p>
				</el-form-item>
			</el-form>
			<div style="text-align: right; margin-top: 0.3rem">
				<el-button type="primary" size="small" @click="showTrunView(viewForm.interval)">确 认</el-button>
				<el-button size="small" @click="dialogSwiperVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</v-scale-screen>
</template>

<script>
	export default {
		name: 'mainView',
		data() {
			return {
				win:window,
				tokenTimer:null,
				fromPage:'',
				fromOrder:'1',
				toBigScreen:false,
				//左侧项目或全局变量
				//loading: false,

				optionId: 0,
				options: [],
				nowOption:'',
				optionListShow:false,
				viewOptionTimer:null,
				userType:Number(localStorage.getItem("atuser_type")),
				viewList:[],
				drawList:[],
				viewListTimer:null,
				viewForm: {
					view_id: '',
					stage_id: '',
					interval:60
				},
				screenFull:false,
				//isFullViewscreen: false,
				showView: false,
				viewListShow: false,
				nowView: 0,
				//轮播图纸
				dialogSwiperVisible:false,
				isPlay:false,
				start:0,
				close:false,
				swiperTimer:null

	        }
	    },

		created(){
			var that = this;
			localStorage.removeItem("fromPage");
			localStorage.removeItem("fromOrder");
			this.fromPage = this.$route.query.fromPage;
			this.fromOrder = this.$route.query.fromOrder;
			console.log(this.fromPage);
			this.isFirst = true;
			localStorage.removeItem('from');
			this.sysName = localStorage.getItem("compName");

		},

		mounted(){
			var that = this;
			this.getProductForView();
			this.getToken();
			this.tokenTimer = setInterval(function() {
				that.getToken();
			}, 10200000);
			this.fullscreenFull();
			setTimeout(function() {
				//必须要延时全屏，否则会有
			    that.$refs.page.style.height = window.screen.height+'px';
			},500)
		},
		methods:{
			fullscreenFull() {
				var that = this;
				this.screenFull =
					document.fullScreen ||
					document.mozFullScreen ||
					document.webkitIsFullScreen;
				var content = document.documentElement;
				if (!this.screenFull) {
					//进入全屏,多重短路表达式
					(content.requestFullscreen && content.requestFullscreen()) ||
					(content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
					(content.webkitRequestFullscreen &&
						content.webkitRequestFullscreen()) ||
					(content.msRequestFullscreen && content.msRequestFullscreen());
					this.screenFull = true;

				}
			},

			exitscreenFull(){
				if(this.screenFull){
					//CancelFullScreen?document.mozCancelFullScreen():
					document.exitFullscreen ?
					document.exitFullscreen() :
					document.mozCancelFullScreen ?
					document.mozCancelFullScreen() :
					document.mozkitExitFullscreen ?
					document.webkitExitFullscreen() :
						"";
					this.screenFull = false;
				}
			},

			// fullViewScreen() {
			// 	var that = this;
			// 	this.isFullViewscreen = !this.isFullViewscreen;
			// 	if (this.isFullViewscreen) {
			// 		that.$refs.mainIframe.removeAttribute("class", "fram");
			// 		that.$refs.mainIframe.style.position = "fixed";
			// 		that.$refs.mainIframe.style.top = 0;
			// 		that.$refs.mainIframe.style.left = 0;
			// 		that.$refs.mainIframe.style.zIndex = 100;
			// 		//that.$refs.mainIframe.setAttribute("frameborder", "no");
			// 		//that.$refs.mainIframe.setAttribute("border", '0');
			// 		that.$refs.mainIframe.style.width = window.screen.width + 'px';
			// 		that.$refs.mainIframe.style.height = window.screen.height + 'px';
			// 		that.$refs.mainIframe.style.backgroundColor = "#fff";
			// 	} else {
			// 		console.log("full");
			// 		that.$refs.mainIframe.style.position = "relative";
			// 		that.$refs.mainIframe.style.top = 0;
			// 		that.$refs.mainIframe.style.left = 0;
			// 		that.$refs.mainIframe.style.zIndex = 1;
			// 		// if(this.monitorMode=='standard'){
			// 		//     that.$refs.mainIframe.setAttribute("class","fram");
			// 		// }else{
			// 			this.fullscreenFull();
			// 			that.$refs.mainIframe.style.height=window.innerHeight+'px';
			// 		//}
			// 		that.$refs.mainIframe.style.width = "100%";
			// 		//that.$refs.mainIframe.setAttribute("frameborder", "no"); //1表示为三维边框，0不是三维，no表示不显示边框，yes显示默认边框
			// 		//that.$refs.mainIframe.setAttribute("border", "0");

			// 	}
			// },

			//根据浏览器是否有书签栏，修正容器尺寸
			changeContainSize(tab, time) {
				var that = this;
				if (tab == 'data') {
					setTimeout(function() {
						var oldHeight = that.$refs.deviceData.offsetHeight;
						that.$refs.deviceData.style.cssText += ";height:" + (oldHeight + 34) +
							"px!important";

					}, time)
				}
				if (tab == 'view') {
					setTimeout(function() {
						var oldHeight = that.$refs.mainIframe.offsetHeight;
						that.$refs.mainIframe.style.cssText += ";height:" + (oldHeight + 34) +
							"px!important";
					}, time)
				}
				if (tab == 'map') {
					setTimeout(function() {
						var oldHeight = that.$refs.content.offsetHeight;
						var newHeight = oldHeight + 30;
						that.$refs.content.style.cssText += ";height:" + newHeight +
							"px!important";

					}, time)
				}
				if (tab == 'image') {
					setTimeout(function() {
						var oldHeight = that.$refs.productImage.offsetHeight;
						var newHeight = oldHeight + 30;
						that.$refs.productImage.style.cssText += ";height:" + newHeight +
							"px!important";

					}, time)
				}
			},

			getProductForView(){
				var that = this;
				this.options = [];
				this.$http({
					method: 'post',
					async:false,
					url: 'api/product/all',
					data: {}
				}).then(res => {
					//console.log(res.data.data)
					if (res && res.data.result == "success") {
						for (let i = 0,len=res.data.data.length; i < len; i++) {
						    if(res.data.data[i].views_count)	{
								let option = {
									value: res.data.data[i].id,
									label: res.data.data[i].product_name,
									//equips_count:res.data.data[i].equips_count,
									views_count:res.data.data[i].views_count
								}
								this.options.push(option);
							}

						}

						this.optionId=this.options[0].value;
						this.nowOption = this.options[0].label;
						localStorage.setItem("optionId",that.optionId);
						this.getViewAll(this.optionId);

						//判断是否有书签栏
						if (window.innerHeight == window.screen.availHeight - 71) {
							that.changeContainSize("view",1000);
						}

					}
				}).catch(error => {
					console.log(error);
				});

			},

			//以下是组态相关函数
			//图纸整体刷新
			refreshViewAndData(){
				var stageId = localStorage.getItem("stageId")?localStorage.getItem("stageId"):this.viewForm.stage_id;
				document.getElementById("mainIframe").src='static/optionZT/client_view.html?stageId='+stageId;
				//this.refreshView();
			},
			//只刷新组态数据的函数
			refreshViewData(){
				this.$http({
						method: 'post',
						url: 'api/draw/refresh',
						data: {
							'id':this.viewForm.stage_id
						}
					}).then(res => {
						if (res && res.data.result == "success") {
							this.$message({
								type: 'info',
								message: '图纸数据已刷新'
							});
						}
					}).catch(error => {
						console.log(error);


					});
			},

			getViewAll(id) {
				var that = this;
				localStorage.setItem("optionId",id);
				this.showView = true;
				this.viewList = [];
				this.viewForm.view_id = '';
				this.viewForm.stage_id = '';
				this.$http({
					method: 'post',
					async: false,
					url: 'api/view/all',
					data:{
						"product_id": id,
						"visit_allow":"all,pc",
						"user_id": localStorage.getItem("userId")
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						if (res.data.data.length) {
							for (var i = 0, len = res.data.data.length; i < len; i++) {
								var view = {
									value: res.data.data[i].id,
									label: res.data.data[i].view_name
								}
								this.viewList.push(view);
							}
							this.viewForm.view_id = this.viewList[0].value;
							this.nowView=this.viewList[0].label;
							this.getStageAll(this.viewForm.view_id);
						} else {
							this.viewForm.view_id = '';
							this.viewForm.stage_id = '';
							document.getElementById("mainIframe").src = "";
						}
					}
				}).catch(error => {
					console.log(error);

				});

			},


			//获取图纸函数
			getStageAll(id) {
				var that = this;
				this.drawList = [];
				this.$http({
					method: 'post',
					url: 'api/draw/all',
					data: {
						'view_id': id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						for (var i = 0, len = res.data.data.length; i < len; i++) {
							var draw = {
								value: res.data.data[i].id,
								label: res.data.data[i].draw_name
							}
							this.drawList.push(draw);
						}

						this.viewForm.stage_id = this.drawList[0].value;
						localStorage.setItem('stageId', that.viewForm.stage_id);
					}
				}).catch(error => {
					console.log(error);
					this.drawList = [];

				});
			},

			//组态下拉框改变事件
			changeView(view) {
				this.getStageAll(view);
			},

			//图纸下拉框改变事件
			changeViewStage(stage) {
			     localStorage.setItem('stageId', stage);
			},

			//全屏时，点击zutai列表改变事件
			changeStage(item, event) {
				var that=this;
				if(event.target.innerText==item.label){
					this.nowView=item.label;
				}
				this.viewForm.view_id=item.value;
				this.changeView(item.value);
				setTimeout(function() {
					that.viewListShow = false;
				}, 5000)
			},

			changeOption(item,event){
				var that=this;
				if(event.target.innerText==item.label){
					this.nowOption=item.label;
				}
				localStorage.setItem("optionId",item.value);
				this.getViewAll(item.value)
				setTimeout(function() {
					that.optionListShow = false;
				}, 5000)
			},

			showOptionList(){
				var that=this;
				this.optionListShow=!this.optionListShow;
				if(this.optionListShow){
					this.viewListShow = false;
				}
				clearTimeout(that.viewOptionTimer);
			},

			keepOptionList(){
				var that=this;
				this.optionListShow =true;
				clearTimeout(that.viewOptionTimer);
			},

			closeOptionList(){
				var that=this;
				this.viewOptionTimer=setTimeout(function() {
					that.optionListShow = false;
				},3000);
			},


			showViewList(){
				var that=this;
				this.viewListShow=!this.viewListShow;
				if(this.viewListShow){
					this.optionListShow = false;
				}
				clearTimeout(that.viewListTimer);

			},


			keepViewList(){
				var that=this;
				this.viewListShow =true;
				clearTimeout(that.viewListTimer);
			},

			closeViewList(){
				var that=this;
				this.viewListTimer=setTimeout(function() {
					that.viewListShow = false;
				},3000);
			},

			changeInterval(interval){
				if(Number(interval)<30){
					this.viewForm.interval=30;
				}else if(Number(interval)>600){
					this.viewForm.interval=600;
				}
			},

			swiperStage(){
				this.dialogSwiperVisible = true;
			},

			showTrunView(interval=60){
				var that=this
				this.isPlay=true;
				this.$message({
					type: 'info',
					message: '组态图纸正在轮播...'
				});
				let time=Number(interval) || 60;
				this.swiperTimer=setInterval(function(){
					that.viewForm.stage_id = that.drawList[that.start].value;
					localStorage.setItem("stageId",that.viewForm.stage_id);
					that.start++;
					if(that.start==that.drawList.length){
						that.start=0;
					}
				},time*1000);
				this.dialogSwiperVisible=false;
			},

			stopTrunView(){
				var that=this;
				this.isPlay = false;
				this.$message({
					type: 'info',
					message: '组态图纸轮播已停止'
				});
				clearInterval(that.swiperTimer);
				this.viewForm.stage_id = this.drawList[0].value;
				localStorage.setItem("stageId",that.viewForm.stage_id);
			},


			goExit(type) {
				var that = this;
				console.log(this.fromPage);
				localStorage.setItem("from", "mainView");
				this.showView = false;
				this.$message.closeAll();
				this.$notify.closeAll();
				//window.location.reload();
				if (this.screenFull) {
					document.exitFullscreen ? document.exitFullscreen() :
					document.mozCancelFullScreen ? document.mozCancelFullScreen() :
					document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
					this.screenFull = false;
			    }
				if(type=='control'){
					if(this.fromPage=='Login' || !this.fromPage){
						this.$router.push({
							path: '/device',
							name: 'device',
							component: 'device'
						})
						localStorage.setItem("indexPath",'7-1');
					}else{
						this.$router.push({
							path: '/' + that.fromPage,
							name: that.fromPage,
							component: that.fromPage
						})
						localStorage.setItem("indexPath",this.fromOrder);
					}
				}else{
					this.$router.push({
					    name: 'Login',
					    path: '/',
					    component: 'Login'
					});
					localStorage.clear();
				}
			},

			goScreenTotal() {
				var that = this;
				this.toBigScreen=true;
				//localStorage.setItem("fromPage",that.fromPage);
				//localStorage.setItem("fromOrder",that.fromOrder);
				this.$router.push({
					path: '/showTotal',
					name: 'showTotal',
					component: 'showTotal'
				});
			}
		},


		beforeDestroy() {
			window.speechSynthesis.cancel();
			this.$message.closeAll();
			this.$notify.closeAll();
			if (!this.toBigScreen && this.screenFull) {
				document.exitFullscreen ? document.exitFullscreen() :
				document.mozCancelFullScreen ? document.mozCancelFullScreen() :
				document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
			    this.screenFull = false;
		    }else{
				this.screenFull = true;
			}

		},

		destroyed() {
			var that = this;
			clearInterval(that.tokenTimer);
			clearInterval(that.swiperTimer);
		}

	}
</script>

<style scoped>
	.viewContent{
		position:absolute;
		z-index:1;
		left:0;
		top:0;
		bottom:0;
		width:100%;
		height:100%;
		margin:0;
	    /* margin-top:0.2rem; */
		padding:0;
		/* transition: all 500ms linear; */
	}

	#viewContent{
		transition: all 500ms linear;
	}

	.framForView{
		width:100%;
		height:100%;
		overflow:hidden;
		position:relative;
		z-index: 1;
		transition: all 500ms linear;
		padding: 0 !important;
	}

	.viewBox {
		min-width: 210px;
		font-size: 0.35rem;
		color: white;
		position:absolute;
		top: 0.9rem;
		right: 0.3rem;
		max-height:100%;
		/* transition:all 500ms linear; */
		z-index: 10000;
	}

	.listHead{
		width: 100%;
		height: 0.6rem;
		line-height: 0.6rem;
		margin-top: 0.1rem;
		background-color:transparent;
		font-size:0.3rem;
		color:#fff;
		text-align:left;
		border-bottom: 2px solid deepskyblue;
		/* cursor:pointer; */
		/*deepskyblue透明度0.5*/
		/* background-color:rgba(0,191,255,1); */
		/* border-radius: 4px; */
		/* padding: 0 0.2rem; */
		padding:0;
	}

	.oneView {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		margin-top: 0.2rem;
		background-color: rgba(0, 0, 0, 0.3);
		cursor:pointer;
		/*deepskyblue透明度0.5*/
		/* background-color:rgba(0,191,255,1); */
		border-radius: 4px;
		padding: 0 0.1rem;
	}

	.active_2 {
		color: deepskyblue;
		background-color: rgba(0, 0, 0, 0.6);
		border: 1px solid deepskyblue;
	}


	.viewbtn_2 {
		display: flex;
		/* display: inline-block; */
		position: fixed;
		height: 0.6rem;
		top: 0.3rem;
		right: 0.3rem;
		z-index: 10000;
		background-color: rgba(0, 0, 0, 0.3) !important;
		border: none;
		padding: 0.1rem;
		max-width:0.6rem;
		justify-content: space-between;
		align-items: center;
		flex:auto;
		transition: all 1000ms linear;
		border-radius: 4px;
		overflow:hidden;
	}

	.viewbtn_2:hover{
		max-width:6rem;
	}

	.viewbtn_2 img {
		width: 0.4rem;
		height: 0.4rem;
		/* margin-right:0.15rem; */
		cursor: pointer;
	}

	.viewbtn_2 i {
		color:#fff;
		font-size:0.45rem;
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
	}

	i+i{
		margin-left:0.15rem;
	}

	img + i{
		margin-left:0.15rem;
	}

	/* .viewbtn_2 span{
		display:inline-block;
		width:auto;
		margin-left:0.3rem;
		color:#eee;
		font-weight:700;
		font-size:0.35rem;
	} */

</style>
